import { useState } from 'react'
import { useSelector } from 'react-redux'
import { View, Button, Text, Input, Picker, Textarea, Image } from '@tarojs/components'
import './index.scss'
import Taro from '@tarojs/taro'
import { activityAddApi } from '../../../http/Api/activity';
import { uploadHttp } from '../../../http/index'

const PublicActivity = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [img, setImg] = useState('');
  const [dateSel, setDateSel] = useState('2018-04-22');
  const [count, setCount] = useState(0);
  const [address, setAddress] = useState({});
  const openid = useSelector((state) => state.user.openid)

  const onChangeTitle = (e) => {
    console.log(e.target)
    setTitle(e.target.value);
  }
  const onChangeBody = (e) => {
    setBody(e.target.value);
  }
  const onDateChange = e => {
    setDateSel(e.detail.value)
  }
  const onChangeCount = (e) => {
    setCount(e.target.value);
  }

  const chooseAddress = () => {
    wx.chooseLocation({
      success(res) {
        console.log('返回位置：', res)
        setAddress({
          address: res.address,
          latitude: res.latitude,
          longitude: res.longitude,
          name: res.name
        })
      },
      fail(err) {
        console.log('返回位置失败：', err)
      }
    })

    // wx.choosePoi({
    //   success(res) {
    //     console.log('返回位置：', res)
    //   },
    //   fail(err) {
    //     console.log('返回位置失败：', err)
    //   }
    // })
  }

  // 发布
  const submitPublic = async () => {
    const data = {
      openid,
      title,
      body,
      dateSel,
      count,
      address,
      img
    }
    console.log(data);

    const res = await activityAddApi(data);

    if (res.data.code === '200') {
      Taro.showToast({
        title: '发布成功'
      });
      setTitle('');
      setBody('');
      setDateSel('');
      setCount(0);
      setAddress({});
      setImg(res.data);
      // Taro.navigateBack();

      // 订阅订阅消息
      Taro.requestSubscribeMessage({
        tmplIds: ['tpmcb82V9DO3oH-EWkiQmS-pg1jJfiZmX90Yz63JhxU'], // 需要订阅的消息模板的 id 的集合，一次调用最多可订阅3条消息
        success(res) {
          console.log('允许订阅消息');
        },
        fail(err) {
          console.log('拒绝订阅消息', err);
        }
      });
      Taro.reLaunch({
        url: '/pages/index/index'
      });
    }
    console.log('请求成功：', res);
  }

  // 图片上传
  const onUploadImg = () => {
    Taro.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(imageRes) {
        console.log('选择的图片：', imageRes);
        const tem = imageRes.tempFilePaths[0];

        uploadHttp({
          url: '/wechat/activity/uploadpreview',
          filePath: tem,
          name: 'img',
          formData: {
            msg: '活动封面图'
          },
          success(uploadRes) {
            console.log('图片上传成功：', uploadRes.data);
            const res = JSON.parse(uploadRes.data)
            setImg(res.data);
          },
          fail(uploadErr) {
            console.log('图片上传失败：', uploadErr)
          }
        })
      },
      fail(err) {
        console.log('选择图片失败', err);
      }
    })
  }

  return (
    <View>
      发布
      <View className='public-group'>
        <Input placeholder='请输入活动标题' value={title} onInput={onChangeTitle} />
      </View>
      <View className='public-group'>
        <Textarea placeholder='请输入活动内容' value={body} onInput={onChangeBody} />
      </View>

      <View className='public-group'>
        <Button onClick={onUploadImg}>封面图上传</Button>
        <Image src={img}></Image>
      </View>

      <View className='public-group'>
        <Text>日期选择器</Text>
        <View>
          <Picker mode='date' onChange={onDateChange}>
            <View className='picker'>
              当前选择：{dateSel}
            </View>
          </Picker>
        </View>
      </View>
      <View className='public-group'>
        <Input placeholder='请输入活动人数' type='type' value={count} onInput={onChangeCount} />
      </View>

      <View className='public-group'>
        <Button onClick={chooseAddress}>选择地址</Button>
      </View>

      <View className='public-group'>
        <Button onClick={submitPublic}>发布</Button>
      </View>
    </View>
  )
}

export default PublicActivity

